import React, { useEffect, useState } from 'react'
import { Button,Layout } from 'antd'
import './homeHeader.less'
import logo from '@/assets/image/header/logo.png';
import { reqUserName } from '../../../api/api';

const {Header} = Layout

export default function HomeHeader({changUrl,goOut,role}) {

  const [name,setName] = useState()

  const getUserName =(role)=>{
    reqUserName(role).then(
      res =>{
        if(res.status === 200){
          setName(res.data)
        }
      }
    )
  }

  useEffect(()=>{
    if(role !== null){
      getUserName(role)
    }
  },[role])




  return (
    <Header className='home-header'>
      <div className='header'>
        <img 
          src={logo} 
          alt="logo" 
          width={120} 
          onClick={()=>changUrl('/home',{replace:true},'home')}
          />
        <div className='welcome'>
          <h1>欢迎回来!</h1>
          <div 
            className='head-picture' 
            onClick={()=>changUrl('/home/userInfor',{replace:true},'userInfor')}
            ></div>
          <div>{name?.fd_name}</div>
        </div>
        <Button className='exit' onClick={() => goOut() }>退出</Button>
      </div>
    </Header>
  )
}
